<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bilibili</title>
    <link rel="stylesheet" type="text/less" href="./less/index.less">
    <script src="https://cdn.bootcdn.net/ajax/libs/less.js/4.1.1/less.min.js"></script>
    <link rel="stylesheet" href="./font/iconfont.css">
</head>

<body>
    <!-- 头部 -->
    <header class="b-header">
        <nav class="navbar">
            <div class="left">
                <a href="#"><i class="iconfont Navbar_logo"></i></a>
            </div>
            <div class="right">
                <a href="#"><i class="iconfont ic_search_tab"></i></a>
                <a class="login" href="#"><img src="./images/login.png" alt=""></a>
                <a class="download" href="#"><img src="./images/download.png" alt=""></a>
            </div>
        </nav>
        <div class="menu">
            <div class="tab">
                <ul>
                    <li class="active"><a href="#">首页</a></li>
                    <li><a href="#">动画</a></li>
                    <li><a href="#">番剧</a></li>
                    <li><a href="#">国创</a></li>
                    <li><a href="#">音乐</a></li>
                    <li><a href="#">舞蹈</a></li>
                    <li><a href="#">游戏</a></li>
                    <li><a href="#">知识</a></li>
                </ul>
            </div>
            <a class="down" href="#"><i class="iconfont general_pulldown_s"></i></a>
        </div>
    </header>
    <!-- 内容 -->
    <section class="b-main">
        <div class="video-list">
            <a href="#" class="video-item">
                <div class="card">
                    <img src="./images/1.jpg" alt="">
                    <div class="count">
                        <p><i class="iconfont icon_shipin_bofangshu"></i> 123.2万</p>
                        <p><i class="iconfont icon_shipin_danmushu"></i> 2.4万</p>
                    </div>
                </div>
                <p class="title ellipsis-2">【小泽】华为MatePad Pro&鸿蒙全家桶体验：什么是真正的鸿蒙？</p>
            </a>
            <a href="#" class="video-item">
                <div class="card">
                    <img src="./images/1.jpg" alt="">
                    <div class="count">
                        <p><i class="iconfont icon_shipin_bofangshu"></i> 123.2万</p>
                        <p><i class="iconfont icon_shipin_danmushu"></i> 2.4万</p>
                    </div>
                </div>
                <p class="title ellipsis-2">【小泽】华为MatePad Pro&鸿蒙全家桶体验：什么是真正的鸿蒙？</p>
            </a>
            <a href="#" class="video-item">
                <div class="card">
                    <img src="./images/1.jpg" alt="">
                    <div class="count">
                        <p><i class="iconfont icon_shipin_bofangshu"></i> 123.2万</p>
                        <p><i class="iconfont icon_shipin_danmushu"></i> 2.4万</p>
                    </div>
                </div>
                <p class="title ellipsis-2">【小泽】华为MatePad Pro&鸿蒙全家桶体验：什么是真正的鸿蒙？</p>
            </a>
            <a href="#" class="video-item">
                <div class="card">
                    <img src="./images/1.jpg" alt="">
                    <div class="count">
                        <p><i class="iconfont icon_shipin_bofangshu"></i> 123.2万</p>
                        <p><i class="iconfont icon_shipin_danmushu"></i> 2.4万</p>
                    </div>
                </div>
                <p class="title ellipsis-2">【小泽】华为MatePad Pro&鸿蒙全家桶体验：什么是真正的鸿蒙？</p>
            </a>
            <a href="#" class="video-item">
                <div class="card">
                    <img src="./images/1.jpg" alt="">
                    <div class="count">
                        <p><i class="iconfont icon_shipin_bofangshu"></i> 123.2万</p>
                        <p><i class="iconfont icon_shipin_danmushu"></i> 2.4万</p>
                    </div>
                </div>
                <p class="title ellipsis-2">【小泽】华为MatePad Pro&鸿蒙全家桶体验：什么是真正的鸿蒙？</p>
            </a>
            <a href="#" class="video-item">
                <div class="card">
                    <img src="./images/1.jpg" alt="">
                    <div class="count">
                        <p><i class="iconfont icon_shipin_bofangshu"></i> 123.2万</p>
                        <p><i class="iconfont icon_shipin_danmushu"></i> 2.4万</p>
                    </div>
                </div>
                <p class="title ellipsis-2">【小泽】华为MatePad Pro&鸿蒙全家桶体验：什么是真正的鸿蒙？</p>
            </a>
            <a href="#" class="video-item">
                <div class="card">
                    <img src="./images/1.jpg" alt="">
                    <div class="count">
                        <p><i class="iconfont icon_shipin_bofangshu"></i> 123.2万</p>
                        <p><i class="iconfont icon_shipin_danmushu"></i> 2.4万</p>
                    </div>
                </div>
                <p class="title ellipsis-2">【小泽】华为MatePad Pro&鸿蒙全家桶体验：什么是真正的鸿蒙？</p>
            </a>
            <a href="#" class="video-item">
                <div class="card">
                    <img src="./images/1.jpg" alt="">
                    <div class="count">
                        <p><i class="iconfont icon_shipin_bofangshu"></i> 123.2万</p>
                        <p><i class="iconfont icon_shipin_danmushu"></i> 2.4万</p>
                    </div>
                </div>
                <p class="title ellipsis-2">【小泽】华为MatePad Pro&鸿蒙全家桶体验：什么是真正的鸿蒙？</p>
            </a>
            <a href="#" class="video-item">
                <div class="card">
                    <img src="./images/1.jpg" alt="">
                    <div class="count">
                        <p><i class="iconfont icon_shipin_bofangshu"></i> 123.2万</p>
                        <p><i class="iconfont icon_shipin_danmushu"></i> 2.4万</p>
                    </div>
                </div>
                <p class="title ellipsis-2">【小泽】华为MatePad Pro&鸿蒙全家桶体验：什么是真正的鸿蒙？</p>
            </a>
            <a href="#" class="video-item">
                <div class="card">
                    <img src="./images/1.jpg" alt="">
                    <div class="count">
                        <p><i class="iconfont icon_shipin_bofangshu"></i> 123.2万</p>
                        <p><i class="iconfont icon_shipin_danmushu"></i> 2.4万</p>
                    </div>
                </div>
                <p class="title ellipsis-2">【小泽】华为MatePad Pro&鸿蒙全家桶体验：什么是真正的鸿蒙？</p>
            </a>
        </div>
    </section>
    <!-- 按钮 -->
    <div class="open-btn">
        <a href="#">
            <i class="iconfont Navbar_logo"></i>
            <span>打开App，看你感兴趣的视频</span>
        </a>
    </div>
</body>

</html>